import { Graph, Cell, CellView, Node } from "@antv/x6";

Graph.registerNode(
  "lane",
  {
    inherit: "rect",
    markup: [
      {
        tagName: "rect",
        selector: "body",
      },
      {
        tagName: "rect",
        selector: "name-rect",
      },
      {
        tagName: "text",
        selector: "name-text",
      },
    ],
    attrs: {
      body: {
        fill: "#FFF",
        stroke: "#5F95FF",
        strokeWidth: 1,
      },
      "name-rect": {
        width: 200,
        height: 30,
        fill: "#5F95FF",
        stroke: "#fff",
        strokeWidth: 1,
        x: -1,
      },
      "name-text": {
        ref: "name-rect",
        refY: 0.5,
        refX: 0.5,
        textAnchor: "middle",
        fontWeight: "bold",
        fill: "#fff",
        fontSize: 12,
      },
    },
  },
  true
);

Graph.registerNode(
  "lane-rect",
  {
    inherit: "rect",
    width: 100,
    height: 60,
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: "#5F95FF",
        fill: "#EFF4FF",
      },
      text: {
        fontSize: 12,
        fill: "#262626",
      },
    },
  },
  true
);

Graph.registerNode(
  "lane-polygon",
  {
    inherit: "polygon",
    width: 80,
    height: 80,
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: "#5F95FF",
        fill: "#EFF4FF",
        refPoints: "0,10 10,0 20,10 10,20",
      },
      text: {
        fontSize: 12,
        fill: "#262626",
      },
    },
  },
  true
);

Graph.registerEdge(
  "lane-edge",
  {
    inherit: "edge",
    attrs: {
      line: {
        stroke: "#A2B1C3",
        strokeWidth: 2,
      },
    },
    label: {
      attrs: {
        label: {
          fill: "#A2B1C3",
          fontSize: 12,
        },
      },
    },
  },
  true
);

const graph = new Graph({
  container: document.getElementById("x6demo2")!,
  background: { color: "#F2F7FA" },
  connecting: {
    router: "orth",
  },
  translating: {
    // 约束
    restrict(cellView: CellView) {
      const cell = cellView.cell as Node;
      const parentId = cell.prop("parent");
      if (parentId) {
        const parentNode = graph.getCellById(parentId) as Node;
        if (parentNode) {
          return parentNode.getBBox().moveAndExpand({
            x: 0,
            y: 30,
            width: 0,
            height: -30,
          });
        }
      }
      return cell.getBBox();
    },
  },
});

function fetchData1() {
  fetch("https://x6.antv.antgroup.com/data/swimlane.json")
    .then((response) => response.json())
    .then((data) => {
      setData(data);
    });
}
type _INodeData = Parameters<typeof graph.createEdge>[number] | Parameters<typeof graph.createNode>[number];
type INodeData = Exclude<_INodeData, "shape"> & { shape: "lane" | "lane-edge" | "lane-rect" | "lane-polygon" };
function fetchData2() {
  const data = [
    { id: "L1", label: "部门预算", shape: "lane", width: 200, height: 600, position: { x: 60, y: 60 } },
    { id: "L2", label: "指标下达", shape: "lane" },
    { id: "L3", label: "资金支付", shape: "lane" },
    { id: "L4", label: "会计核算", shape: "lane" },
    { id: "L4", label: "决算", shape: "lane" },
  ] as INodeData[];

  setData(data);
}

function setData(data) {
  const cells: Cell[] = [];
  data.forEach((item: any) => {
    if (item.shape === "lane-edge") {
      cells.push(graph.createEdge(item));
    } else {
      cells.push(graph.createNode(item));
    }
  });
  graph.resetCells(cells);
  graph.zoomToFit({ padding: 10, maxScale: 1 });
}

// eslint-disable-next-line import/no-anonymous-default-export
export default function () {
  //   fetchData1();
  fetchData2();

  (document.getElementById("x6demo2") as any).graph = graph;

  return <></>;
}
